<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Topology</title>
</head>
<body>
    <button id="getL2">获取2层clos拓扑数据</button>
    <script src="d3.js"></script>
    
    <!--设置画布-->
    <script>

        //定义svg画布的宽高
        var sceneWidth = 800;
        var sceneHeight = 450;

        //定义画布四周的留白
        var padding = 20;
        
        //定义去掉留白后真实的作画范围
        var width = sceneWidth - padding * 2;
        var height = sceneHeight - padding * 2;

        //添加svg元素，并设置svg的属性和样式
        var svg = d3.select("body").append("svg");
        svg.attr("width",sceneWidth).attr("height",sceneHeight);

        svg.style("border","2px solid black")
           .style("margin", "0")
           .style("position","absolute")
           .style("left", "50%")
           .style("top", "100px")
           .style("padding", "10px")
           .style("margin-left", -sceneWidth/2);

        //定义数据集，需要主机拓扑信息对象、链路信息对象
        
    </script>

    <!--给button绑定数据获得后台的拓扑数据-->
    <script>
        var button = document.getElementById("getL2");
        var topoData;

        button.addEventListener("click", function() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        topoData = xhr.responseText;
                    }
                    else {
                        console.log("request for /showTopo was unsuccessful: " + xhr.status);
                    }
                }
            };
            xhr.open("get", "/showTopo", true);//异步请求
            xhr.send(null);
        });
    </script>
</body>
</html>